<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>cookie是存在浏览器中的一些数据，每次发送请求时都会默认携带，无论是否有用</p>
    <button class="add-btn">增加cookie</button>
    <button class="del-btn">删除aaa</button>
    <button class="edit-btn">修改bbb</button>
    <button class="get-btn">显示所有</button>
    <script>
        function initCookie() {
            // 进入页面后先随便存一些数据
            document.cookie = "aaa=133esdf"
            document.cookie = "bbb=133esdf"
            document.cookie = "sdcc=13rrff223sdf"
            document.cookie = "dsddd=133ewer2123"
        }

        var addBtn = document.querySelector('.add-btn')
        var delBtn = document.querySelector('.del-btn')
        var editBtn = document.querySelector('.edit-btn')
        var getBtn = document.querySelector('.get-btn')

        // 新增
        addBtn.onclick = function () {
            var time = new Date().getFullYear()
            document.cookie = "time=" + time
        }

        // 删除aaa
        delBtn.onclick = function () {
            // 指定时间
            var time = new Date();
            //+1 代表一天后过期，如果想立马删除，可以设置-1
            time.setDate(time.getDate() + 1);
            document.cookie = "aaa=133esdf;expires=" + time
        }

        // 修改bbb
        editBtn.onclick = function () {
            document.cookie = "bbb=bbbbnewbbb"
        }

        // 获取所有cookie
        getBtn.onclick = function () {
            // 所有内容组成的字符串
            var str = document.cookie;;
            var arr1 = str.split(';');
            // console.log(arr1);
            var obj = {};
            for (var i = 0; i < arr1.length; i++) {
                var arr2 = arr1[i].split('=');
                // trim 过滤字符串的首尾空格
                obj[arr2[0].trim()] = arr2[1]
            }
            console.log(obj);
        }

        // 封装的目的——为了复用  下次再有相同的功能，可以省事儿
        // setCookie()——创建Cookie
        // getCookie()——获取Cookie
        // removeCookie()——删除Cookie
        function setCookie(name, val) {
            document.cookie = name + '=' + val;
        }
        function getCookie() {
            // 获取所有的cookie 以对象的形式返回出来
            // 所有内容组成的字符串
            var str = document.cookie;;
            var arr1 = str.split(';');
            // console.log(arr1);
            var obj = {};
            for (var i = 0; i < arr1.length; i++) {
                var arr2 = arr1[i].split('=');
                // trim 过滤字符串的首尾空格
                obj[arr2[0].trim()] = arr2[1]
            }
            return obj
        }
        function removeCookie(name) {
            // 根据name删除数据
            // 指定时间
            var time = new Date();
            //+1 代表一天后过期，如果想立马删除，可以设置-1
            time.setDate(time.getDate() - 1);
            document.cookie = name + "=133esdf;expires=" + time
        }
        document.onload = function () {
            initCookie();
        }
    </script>
</body>

</html>